<template>
	<view class="app">
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" isAuto></authorize>
		<view class="app-container">
			<view class="card margin-bottom">
				<view
					class="bg-img bg-mask flex align-start"
					style="background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575980560762&di=423ac47f87415a2ce1e07348fd6cba2d&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181226%2Ffe862113e250409dbee3bf55acff3619.jpeg');"
				>
					<view class="padding content text-white">
						<view class="padding-xs text-lg text-bold">{{ printInfo.name || '' }}</view>
						<view class="padding-xs text-gray">{{ '投入使用云打印机' + printInfo.cloud_printer_num + '台' || '没有绑定区域暂无信息' }}</view>
						<view class="action text-gray" @tap="getAreaInfoListEvnet()">更换></view>
					</view>
				</view>
			</view>
			<view class="cu-list menu">
				<block v-for="(item, index) in list" :index="index" :key="index">
					<view class="cu-item arrow" @tap="route(item)">
						<view class="content">
							<text class="text-grey">{{ item.name }}</text>
						</view>
					</view>
				</block>
				<view class="cu-item arrow">
					<view class="content"><button open-type="openSetting" class="no-button text-grey">授权设置</button></view>
				</view>
			</view>
		</view>
		<select-region v-model="show" :list="regionList" @selectRegion="comfirmRegion" @search="getAreaInfoListEvnet"></select-region>
	</view>
</template>

<script>
import SelectRegion from '@/components/select-region/select-region';
import { mapGetters } from 'vuex';
import { getBindingAreaInfo, getAreaInfoList, changeBindingArea } from '@/api/user';
import authorize from '@/components/authorize/authorize';
export default {
	components: {
		authorize
	},
	data() {
		return {
			list: [
				{
					name: '我的收货地址',
					route: '/user-pages/address/address'
					// }, {
					//     name: '我的联系方式',
					//     route: '/user-pages/address/address'
				},
				{
					name: '我的钱包',
					route: '/user-pages/wallet'
				}
			],
			show: false,
			printInfo: {
				address: '',
				cloud_printer_num: '',
				longitude_and_latitude: '',
				name: ''
			},
			regionList: []
			// isHidden: true
		};
	},
	components: {
		SelectRegion
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
	},
	methods: {
		onLoadFun() {
			this.getBindingAreaInfoEvent();
		},
		/**
		 *
		 */
		getBindingAreaInfoEvent() {
			getBindingAreaInfo().then(res => {
				if (res.result) this.printInfo = res.result;
			});
		},
		route(item) {
			uni.navigateTo({
				url: item.route
			});
		},
		/**
		 * 获取地区信息列表
		 */
		getAreaInfoListEvnet(keyword) {
			getAreaInfoList({
				keyword: keyword || ''
			}).then(res => {
				this.show = true;
				this.regionList = res.result.showing;
			});
		},
		/**
		 * 确认区域
		 */
		comfirmRegion(region) {
			changeBindingArea({
				area_id: region.area_id
			}).then(res => {
				uni.showToast({
					title: '成功确认区域',
					icon: 'success',
					duration: 2000
				});
				this.printInfo = region;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card {
	height: 250upx;
	position: relative;
	overflow: hidden;
	padding: 0 !important;

	.bg-img {
		height: 100%;
		position: relative;

		.content {
			width: 100%;
			height: 100%;

			.action {
				position: absolute;
				right: 0;
				bottom: 0;
				padding: 10px;
			}
		}
	}
}
.no-button {
	background-color: white;
	padding: 0;
	font-size: 30rpx;
	line-height: 1.6em;
	text-align: left;
	&::after {
		content: none;
	}
}
.cu-item::after {
	border: none !important;
}
</style>
